{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/layer.min.js' %}"></script>
    <script src="{% static 'js/sweetalert.min.js' %}"></script>
    <script src="{% static 'plugins/bootstrap/js/bootstrap.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.min.css' %}">
    <title>用户登录页面</title>
    <style>
        body {
            height: 100vh;
            background: url({% static 'img/img_4.jpg' %}) no-repeat;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;

        }
    </style>
</head>
<body>
<div class="container ">
    <div class="row" style="margin-top: 50px">
        <div class="col-md-6 col-md-offset-3">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title text-center">登录界面</h3>
                </div>
                <div class="panel-body">

                    <form id="login_form">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="">用户名:</label>
                            <input type="text" class="form-control" name="username" placeholder="用户名">
                        </div>
                        <div class="form-group">
                            <label for="">密码:</label>
                            <input type="password" class="form-control" name="password" placeholder="密码">
                        </div>
                        <div class="form-group">
                            <label for="">确认密码:</label>
                            <input type="password" class="form-control" name="confirm_password" placeholder="确认密码">
                        </div>
                        <div class="form-group">
                            <label for="">验证码:</label>
                            <div class="row">
                                <div class="col-md-6 ">
                                    <input type="text" name="verify" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <img src="{% url 'get_validCode' %}" id="valid_code_img"
                                         alt="" width="250px" height="37px">
                                </div>
                            </div>
                        </div>
                        <input type="button" id="login_btn" class="btn btn-success btn-block" value="登录">

                    </form>

                </div>
            </div>

        </div>

    </div>
</div>
<script>
    {#验证码点击刷新#}
    $("#valid_code_img").click(function () {
        $(this)[0].src += "?"
    })

    {#登录认证#}
    $("#login_btn").click(function () {
        //看登录按钮是否能触发
        {#alert(111)#}
        //创建表单数据
        let data = {}
        //存储表单数据
        $.each($("#login_form").serializeArray(), (index, dataDict) => {
            data[dataDict.name] = dataDict.value
        })
        //发送ajax请求
        $.ajax({
                url: "",
                type: 'post',
                data: data,

                success: (response) => {
                    // 回调函数处理逻辑
                    if (response.code === 2000) {
                        swal({
                            title: response.message,
                            icon: "success",
                            button: true,
                        }).then(() => {
                            window.location.href = response.next_url;
                        });
                    } else {
                        swal({
                            title: response.errors,
                            icon: "error",
                            button: true,
                        }).then(() => {
                            window.location.reload()
                        });
                    }
                }


            }
        )
    })
</script>

</body>
</html>